<template>
  <div class="readOnly">
    <search-head
      ref="essTableRef"
      :search-list="searchList"
      :search-data="searchData"
      :options="options"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
      @handleDownload="handleDownload"
    />
    <ess-table
      ref="table"
      :thead-list="spuListHeader"
      :other-container-box="otherContainerBox"
      :total="total"
      :data-list="dataList"
      :page-params="pageParams"
      @handlePageChange="handlePageChange"
      @operationLog="operationLog"
    >
      <template v-slot:skuType="{ scope }">
        {{ scope.row.skuType | skuTypes }}
      </template>
      <template v-slot:buildStandard="{ scope }">
        {{ scope.row.buildStandard | filterBuildStandard }}
      </template>
      <template v-slot:mySlot="{ scope }">
        <span class="el-button--text" @click="clicks(scope)"> {{ scope.row.sku }}</span>
      </template>
      <template v-slot:creatain="{ scope }">
        <span>{{ fileTexts(scope.row.mainStatus) }}</span>
      </template>
    </ess-table>
    <operation-log ref="operationLogRef" :process-data-list="processDataList" />
  </div>
</template>

<script>
import searchHead from '@//components/searchHead/searchHead.vue'
import { tableParams, searchHeaderEvent } from '@/components/eTable/js/mixins.js'
import essTable from '@/components/eTable/eTable.vue'
import { getOnlineBuildingProducts } from '@/api/new-item'
import { createGoodsStatus } from '@/views/coi/commonJs/dictionary'
import { exportFile } from '@/api/exportFile.js'
import { processData } from '@/api/coi/onlineTaskAPI/sku'
import operationLog from '@/views/coi/approve/components/operationLog.vue'
import { skuType, constructionStandard, createGoodsTypeKind as creationWay} from '@/views/coi/commonJs/dictionary.js'
import { filterKey, stringToArray } from '@/utils/processingData.js'
import bus from '@/utils/eventBus.js'

export default {
  components: {
    searchHead,
    essTable,
    operationLog
  },
  filters: {
    skuTypes(val) {
      return filterKey(val, skuType)
    },
    filterBuildStandard(val) {
      return filterKey(val, constructionStandard)
    }
  },
  mixins: [tableParams, searchHeaderEvent],
  data() {
    return {
      otherContainerBox: ['.app-container', '.checkComponent'],
      searchData: {},
      searchList: [
        { label: '6位供应商号', type: 'textarea', value: 'createByVendorNbr6List' },
        { label: '部门', type: 'textarea', value: 'deptNbrList' },
        { label: '供应商名称', type: 'input', value: 'createByVendorName' },
        { label: '商品名称', type: 'input', value: 'skuName' },
        { label: 'UPC', type: 'textarea', value: 'upcList' },
        { label: 'UPC(不含检验码)', type: 'textarea', value: 'skuList' },
        { label: '状态', type: 'select', value: 'mainStatus' },
        { label: '建品方式', type: 'select', value: 'creationWay' },
        { label: 'Fineline', type: 'input', value: 'finelineNbr' },
        { label: '建品时间', type: 'time', value: 'endCreateTime' },
        { label: '更新时间', type: 'time', value: 'endUpdateTime' }
      ],
      spuListHeader: [
        {
          type: 'selection',
          name: '复选框',
          value: 'selection',
          width: '40',
          minWidth: '110',
          fixed: 'left'
        },
        {
          name: '供应商号',
          value: 'createByVendorNbr',
          minWidth: '80'
        },
        {
          name: '部门',
          value: 'deptNbr',
          minWidth: '80'
        },
        {
          name: 'Fineline',
          value: 'finelineNbr',
          minWidth: '80'
        },
        {
          name: 'UPC',
          value: 'upc',
          minWidth: '80'
        },
        {
          name: 'UPC(不含校验码)',
          value: 'sku',
          minWidth: '80',
          slot: 'mySlot'
        },
        {
          name: '商品名称',
          value: 'skuName',
          minWidth: '80'
        },
        {
          name: '品牌名称',
          value: 'brandName',
          minWidth: '80'
        },
        {
          name: 'SKU类型',
          value: 'skuType',
          minWidth: '80',
          slot: 'skuType'
        },
        {
          name: '建品供应商号',
          value: 'buildVendorNbr',
          minWidth: '80'
        },
        {
          name: '状态',
          value: 'buildVendorNbr',
          minWidth: 'mainStatus',
          slot: 'creatain'
        },
        {
          name: '供应商名称',
          value: 'createByVendorName',
          minWidth: '80'
        },
        {
          name: '建品标准',
          value: 'buildStandard',
          minWidth: '80',
          slot: 'buildStandard'
        },
        {
          name: '操作',
          width: '110',
          fixed: 'right',
          btnList: [{ text: '操作日志', on: 'operationLog' }]
        }
      ],
      dataList: [],
      //   0:未知,1:自助建品,2:全权委托建品,3:委托建品(给文描),4:委托建品(给图),5:委托建品(寄样)  createGoodsStatus
      options: {
        mainStatus: createGoodsStatus,
        creationWay
      },
      title: '操作日志',
      processDataList: []
    }
  },
  mounted() {
    this.requestData()
  },
  methods: {
    async requestData() {
      // console.log('createGoodsStatus', createGoodsStatus)
      try {
        bus.$emit('changeLoading', true)
        const { result } = await getOnlineBuildingProducts(this.handleSearchData())
        this.dataList = result.data
        this.total = result.total
      } finally {
        bus.$emit('changeLoading', false)
      }
    },
    clicks(scope) {
      const path = `/approvalDetails/${scope.row.id}/${scope.row.mainStatus}/${this.$route.name}/OnlineBuildingTasks`
      this.$router.push({
        path
      })
    },
    handlePageChange(pageParams) {
      this.pageParams = pageParams
      this.requestData()
    },
    newDate(time) {
      const d = new Date(time)
      const datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
      return datetime
    },
    async handleDownload() {
      try {
        bus.$emit('changeLoading', true)
        await exportFile('/item-coi-vendor-mgmt-sku/skuInfo/exportOnlineBuiltSku', this.handleSearchData(), '线上建品')
      } finally {
        bus.$emit('changeLoading', false)
      }
    },
    // 处理请求的数据
    handleSearchData() {
      const searchData = JSON.parse(JSON.stringify(this.searchData))
      if ('upcList' in searchData) searchData.upcList = stringToArray(searchData.upcList, /[\n\r]/)
      if ('skuList' in searchData) searchData.skuList = stringToArray(searchData.skuList, /[\n\r]/)
      if ('deptNbrList' in searchData) searchData.deptNbrList = stringToArray(searchData.deptNbrList, /[\n\r]/)
      if ('createByVendorNbr6List' in searchData) searchData.createByVendorNbr6List = stringToArray(searchData.createByVendorNbr6List, /[\n\r]/)
      if (searchData.endCreateTime && searchData.endCreateTime.length > 0) {
        searchData.startCreatedTime = this.newDate(searchData.endCreateTime[0])
        searchData.endCreateTime = this.newDate(searchData.endCreateTime[1])
      } else delete searchData.endCreateTime
      if (searchData.endUpdateTime && searchData.endUpdateTime.length > 0) {
        searchData.startUpdatedTime = this.newDate(searchData.endUpdateTime[0])
        searchData.endUpdateTime = this.newDate(searchData.endUpdateTime[1])
      } else delete searchData.endUpdateTime

      searchData.pageNum = this.pageParams.pageNum - 1
      searchData.pageSize = this.pageParams.pageSize
      return searchData
    },
    // 操作日志
    async operationLog(row) {
      const { result } = await processData(row.row.id)
      if (Array.isArray(result) && result.length) {
        this.$refs.operationLogRef.dialogVisible = true
        this.processDataList = result
      } else {
        this.$message({
          type: 'warning',
          message: '未查询到该商品线上建品的操作日志'
        })
      }
    },
    fileTexts(id){
      const list = createGoodsStatus
      const text = list.filter((item) => item.value === id)
      if (text.length <= 0) return ''
      else return text[0].label
    }
  }
}
</script>
<style lang="scss" scoped>
.readOnly {
  height: 100%;
}
</style>
